{extend name="index/index" /}
{block name="main"}
{css href="/static/home/css/toastr.min.css"}

<style>
    th, td {
    text-align: center;
    }
</style>

<script>
    // 设置弹框参数
    toastr.options = {
        closeButton: true,// 是否显示关闭按钮
        progressBar: true,// 实现显示计时条
        timeOut: "500",  // 自动关闭时间
        positionClass: "toast-top-right" // 提示位置
        // positionClass: "toast-bottom-full-width" // 提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };
    //获取三个值
    function change(obj, id, val) {
        if (val) {
            //如果当前状态为显示时,则把参数设计为隐藏
            $.post("{:url('admin/index/changecate')}", {id: id, code: 0}, function (data) {
                if (data) {
                    $(obj).html('隐藏');
                    $(obj).attr('class', 'btn btn-danger btn-xs');
                    $(obj).attr('onclick', "change(this," + id + ",0)");
                } else {
                    alert('切换失败,稍后重试!');
                }
            })
        } else {
            //如果当前状态为隐藏时,则把参数设计为显示
            $.post("{:url('admin/index/changecate')}", {id: id, code: 1}, function (data) {
                if (data) {
                    $(obj).html('显示');
                    $(obj).attr('class', 'btn btn-success btn-xs');
                    $(obj).attr('onclick', "change(this," + id + ",1)");
                } else {
                    alert('切换失败,稍后重试!');
                }
            })
        }

    }

    function del(obj,id)
    {
        if(confirm('你确定要删除当前分类吗?')){

            $.post("{:url('admin/index/delete')}",{id:id},function(data){
                if(data){
                    toastr.success('删除分类成功');
                    $(obj).parents('tr').remove();
                }else{
                    toastr.error('删除分类失败');

                }
            })
        }
    }

    function addCate()
    {
        str = $('#CateForm').serialize();
        if (str=='category_name='){
            alert('请输入分类名后重试!');
            return;
        }
        $.post("{:url('admin/index/addCate')}",{str:str},function(data){
            if (data){
                toastr.success('添加成功');
                $('#catelist').append(data);
                $('.close').click();
            }else{
                toastr.error('该分类已存在!');
            }
        })
    }
</script>

<div class="content-page">
    <div class="content">
        <button data-toggle="modal" data-target="#hiModal" class="glyphicon glyphicon-plus btn btn-primary"  style="margin-bottom: 20px;font-size: 12px"><b>&nbsp;添加分类</b> </button>
        <table id="catelist" class="table table-hover bg-white-1">
            <tr>
                <th>分类Id</th>
                <th>分类名</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            {volist name="data" key="k" id="v"}
            <tr>
                <td>{$v['category_id']}</td>
                <td>{$v['category_name']}</td>
                <td>
                    {if condition="$v['is_active'] eq 1"}
                    <button onclick="change(this,{$v['category_id']},{$v['is_active']})"
                            class="btn  btn-success  btn-xs">显示</button>
                    {else/}
                    <button onclick="change(this,{$v['category_id']},{$v['is_active']})"
                            class="btn  btn-danger  btn-xs">隐藏</button>
                    {/if}
                </td>
                <td>

                    <button onclick="del(this,{$v['category_id']})" class="btn btn-xs btn-danger" data-toggle="modal"
                            data-target="#myModal">删除</button>
                </td>
            </tr>
            {/volist}
        </table>
        {$data->render()}
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="hiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <img src="/static/home/images/logo.png" width="120" alt="">

            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="CateForm" method="post" onsubmit="return false">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">分类名:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="category_name" placeholder="CategoryName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">分类状态:</label>
                        <div class="col-sm-10">
                            <input type="radio" name="is_active" value="1"> 显示
                            <input type="radio" name="is_active" value="0"> 隐藏
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn  bg-primary" onclick="addCate()">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
{/block}


